H5页面使用html2canvas实现div生成为图片，保存到手机

2024-01-08 19:22| 来源: 网络整理| 查看: 265

在做微信公众号H5页面时，需求要求html页面生成base64图片，并保存到手机相册中。之前没做过，在网上搜了相关的资料。了解到了html2canvas.js。 html2canvas首先将页面生成canvas画布，然后转换成base64图片。最后长按图片保存到手机相册。

在这里插入图片描述这是效果图，接下来我们看代码。

牛气冲天最高奖金100,000元 1 2 3 4 5 6 7 可点击上方游戏票进行"已刮奖票拍照上传" 生成照片去转发重新上传游戏票长按图片保存到手机 // 获取按钮id var btnSave = document.getElementById("btnSave"); // 获取内容id var content = document.getElementById("flexGird"); // 进行canvas生成 btnSave.onclick = function(){ html2canvas(content, { onrendered: function(canvas) { //添加属性 canvas.setAttribute('id','thecanvas'); //读取属性值 //document.getElementById('canvas').innerHTML = ''; document.getElementById('canvas').appendChild(canvas); // 将图片转成base64格式 var img = canvas.toDataURL("image/jpeg", 1.0); // toDataUrl可以接收2个参数，参数一：图片类型，参数二：图片质量0-1（不传默认为0.92） document.getElementById('base64Img').setAttribute("src", img) // 将base64格式图片显示到页面上 } }); };

以上就是使用html2canvas实现div生成为图片并保存到手机。中间其实还有个小细节，当页面生成为画布转换为base64图片时，图片背景都是半透明的会有黑色背景。用js也可以实现（可以参考w3school），同时也可以用css来控制。css必须写在行内样式中。

以上就是简单的实现了H5页面使用html2canvas实现div生成为图片，保存到手机。大家有更好的方法可以给予点评。

【本文地址】

公司简介

联系我们